<template>
	<div class="addVideo">
		<el-dialog
			title="赛事答题设置"
			:visible.sync="dialogVisible"
			width="900px"
			:modal-append-to-body="false"
			:close-on-click-modal="false"
			custom-class="custom-dialog"
		>
			<el-form
				ref="form"
				:inline="true"
				size="small"
				:model="forms"
				class="form"
				label-width="80px"
				style="display: flex; flex-wrap: wrap"
			>
				<el-form-item label="标题" prop="ques_title">
					<el-input
						v-model="forms.ques_title"
						placeholder="请输入标题"
						clearable
						style="width: 200px"
					/>
				</el-form-item>
				<p class="line">
					<el-button icon="el-icon-search" type="primary" size="small" @click="loadData">
						搜索
					</el-button>
				</p>
			</el-form>
			<el-table
				ref="table"
				size="small"
				stripe
				border
				:data="tableData"
				:cell-style="() => ({ textAlign: 'center' })"
				:header-cell-style="() => ({ textAlign: 'center' })"
				@selection-change="handleSelectionChange"
			>
				<el-table-column type="selection" width="55" />
				<el-table-column label="序号" width="120px">
					<template scope="{row}">
						<el-input
							v-model.number="row.sort_order"
							placeholder="请输入"
							clearable
							maxlength="30"
							style="width: 100%"
							size="mini"
							@input="handleNumberInput($event, row)"
						/>
					</template>
				</el-table-column>
				<el-table-column
					label="题目编号"
					prop="ques_id"
					min-width="100px"
					show-overflow-tooltip
					align="center"
				/>
				<el-table-column
					label="标题"
					prop="ques_title"
					min-width="120px"
					show-overflow-tooltip
					align="center"
				/>
				<el-table-column
					label="题目类型"
					min-width="120px"
					show-overflow-tooltip
					:formatter="row => (row.ques_type === 1 ? '多选题' : '单选题')"
				/>
			</el-table>
			<el-row type="flex" justify="center">
				<el-col :span="24" style="text-align: right">
					<Pagination
						:total="total"
						:page.sync="pageNo"
						:limit.sync="pageSize"
						scroll-el="el-main"
						@pagination="loadData"
					/>
				</el-col>
			</el-row>
			<span slot="footer" class="dialog-footer">
				<el-button style="margin-right: 5px" @click="dialogVisible = false">取消</el-button>
				<el-button type="primary" @click="saveVideos" style="width: 100px">保存</el-button>
			</span>
		</el-dialog>
	</div>
</template>
<script>
	import { mapGetters } from 'vuex'
	import Pagination from '@/components/Pagination'
	import { raceQuestions, bindQuestions } from '@/api/competition-manage'
	import { questionList } from '@/api/system.js'
	export default {
		name: 'RelationQuestions',
		components: { Pagination },
		data() {
			return {
				dialogVisible: false,
				disabled: false,
				info: {},
				multipleSelection: [],
				pageNo: 1,
				pageSize: 10,
				total: 0,
				tableData: [],
				forms: {
					ques_title: ''
				},
				getBindList: []
			}
		},
		computed: {
			...mapGetters(['token', 'userInfo'])
		},
		methods: {
			async initData(info = {}) {
				this.info = info
				await this.getBindData()
				this.dialogVisible = true
				this.$nextTick(async () => {
					this.$refs.table.clearSelection()
					await this.loadData()
				})
			},
			async loadData() {
				const loading = this.$setLoading()
				try {
					const res = await questionList({
						ques_title: this.forms.ques_title,
						page_no: this.pageNo,
						page_size: this.pageSize
					})
					this.total = res.data.total
					this.tableData = res.data.lists

					this.$nextTick(() => {
						this.tableData.forEach((item, index) => {
							this.getBindList.forEach(its => {
								if (its.ques_id === item.ques_id) {
									item.sort_order = its.sort_order
									this.$refs.table.toggleRowSelection(item, true)
								}
							})
						})
					})
					loading.close()
				} catch (e) {
					loading.close()
					console.log(e)
				}
			},
			async getBindData() {
				try {
					const res = await raceQuestions({
						race_id: this.info.race_id
					})
					this.getBindList = res.data
				} catch (e) {
					console.log(e)
				}
			},
			pageChange({ page, limit }) {
				this.pageNo = page
				this.pageSize = limit
				this.loadData()
			},
			handleSelectionChange(val) {
				this.multipleSelection = val
			},
			// 保存
			async saveVideos() {
				const loading = this.$setLoading({
					lock: true,
					text: '数据提交中~'
				})
				bindQuestions({
					race_id: this.info.race_id,
					questions: this.multipleSelection.map((item, index) => {
						return { ques_id: item.ques_id, sort_order: item.sort_order || index }
					})
				})
					.then(res => {
						this.$message.success('题目设置成功！')
						this.dialogVisible = false
					})
					.finally(() => loading.close())
			},
			handleNumberInput(e, item) {
				item.sort_order = e.replace(/[^\d.]/g, '')
				this.$forceUpdate()
			}
		}
	}
</script>
<style lang="scss" scoped>
	.addVideo {
		::v-deep {
			.el-dialog .el-dialog__body {
				padding-bottom: 20px;
			}
			.el-form {
				margin-top: 12px;
			}
			.el-form .el-form-item {
				margin-bottom: 10px;
			}
		}
		.box-wrap {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
		}
	}
</style>
